<template>
    <div>
        <HomeTop></HomeTop>
    <HomeRight></HomeRight>
    <MyCenterPlugin></MyCenterPlugin> 
    <ShoppingCartSearch></ShoppingCartSearch>
        <div class="PersonalData-logo">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
        <div class="PersonalData-top">个人资料</div>
        <div class="PersonalData-myinfo">
            <div class="PersonalData-myinfo-title">
                <div class="PersonalData-myinfo-title-item1" @click="showPInfo()">基本资料</div>
                 <div class="PersonalData-myinfo-title-item2" @click="showPImg()">头像照片</div>
            </div>
            <div v-show="PInfo">
                <div class="PersonalData-myinfo-span1">亲爱的 b****1 ，填写真实的资料，有助于好友找到你哦。</div>
                <div class="PersonalData-myinfo-span2">当前头像</div>
                <img  class="PersonalData-myinfo-img" src="https://img.alicdn.com/sns_logo/i3/O1CN01XFT75J1gqu0kwWCO1_!!6000000004194-2-tps-440-440.png">
                <div class="PersonalData-myinfo-span3">昵称</div>
                <div class="PersonalData-myinfo-span4">咪咪</div>
                <div class="PersonalData-myinfo-span5">
                    <i class="el-icon-warning-outline"></i>
                    <span>&nbsp;&nbsp;&nbsp;1.与淘宝业务或卖家品牌冲突的昵称，淘宝将有可能收回；</span>
                    <span class="PersonalData-myinfo-span5-text2">2.首次填写可不填写保存，昵称设置成功后无法不填写保存。</span></div>
                 <div class="PersonalData-myinfo-span6">性别</div>
                 <div class="PersonalData-myinfo-span7">
                      <el-radio v-model="radio" label="1">男</el-radio>
                        <el-radio v-model="radio" label="2">女</el-radio>
                        <el-radio v-model="radio" label="3">未知</el-radio>
                 </div>
                 <el-button class="PersonalData-myinfo-button">保存</el-button></div>
                 <div v-show="PImg">
                    

                    <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                        multiple
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button class="PersonalData-myinfo-button2">上传图片</el-button>
                        </el-upload>

                     <div class="PersonalData-myinfo-text1">支持jpg、jpeg、png 格式的图片</div>
                      <div class="PersonalData-myinfo-text2">请不要上传公司、店铺、商品的图片，淘宝保留对账户进行全淘宝处罚的权力</div>
                      <div class="PersonalData-myinfo-big-img" ><img src="https://img.alicdn.com/sns_logo/i3/O1CN01XFT75J1gqu0kwWCO1_!!6000000004194-2-tps-440-440.png"></div>
                      <el-button class="PersonalData-myinfo-button3">保存</el-button>
                 </div>
        </div>

    </div>
</template>
<script>
import "../style/PersonalData.css";
    export default {
        name: "PersonalData",
        data() {
            return {
                radio:'1',
                PImg:false,
                PInfo:true,
                 fileList: [{name: 'img.jpg', url: 'https://img.alicdn.com/sns_logo/i3/O1CN01XFT75J1gqu0kwWCO1_!!6000000004194-2-tps-440-440.png'}]
            }
        },
        mounted() {

        },
        methods: {
             handleExceed() {
        this.$message.warning(`当前限制选择1个文件!`);
      },
            showPInfo(){
                this.PImg = false;
                this.PInfo = true; 
            },
            showPImg(){
                this.PImg = true;
                this.PInfo = false; 
            }

        }
    }
</script>